<template>
	<view class="gender">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->
		
		<!-- 内容 -->
		<view class="cont">
			<view class="name">注册账号</view>
			<view class="title">请选择您的性别</view>
			<view class="sexuality">
				<view v-for="item in sex" :data-id="item.name" :key='item.name' @click="gender">
					<image :src="sexCur == item.name ? item.aimg : item.img" mode="widthFix"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
			<!-- <input :disabled="!panduan" v-model="parentId" type="text" value="" placeholder="请输入邀请码（可不填）"/> -->
			<input :disabled="!panduan" v-model="parentId" type="text" value="" placeholder="请输入邀请码（可不填）"/>
			<view class="tips"></view>
			<navigator :url="'/pageageA/pages/register/register?sex='+sexCur+'&parentId='+parentId">
				<view class="btn">下一步</view>
			</navigator>
		</view>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
export default {
	components: {
		PublicHeader
	},
	data() {
		return {
			panduan: false,
			title: '注册账号',
			sexCur:'男',
			parentId:'',
			sex:[
				{
					name:'男',
					img:'/static/images/middle_image_man@2x.png',
					aimg:'/static/images/middle_image_man_b@2x.png',
					title:'我是帅气男性'
				},
				{
					name:'女',
					img:'/static/images/middle_image_woman@2x.png',
					aimg:'/static/images/middle_image_woman_b@2x.png',
					title:'我是优雅女性'
				}
			]
		};
	},
	onShow() {
		let _this = this
		_this.panduan = false
		uni.getStorage({
		    key: 'parentId',
		    success: function (res) {
				console.log('成功',res)
				_this.parentId = res.data
				console.log(res.data)
				_this.panduan = false
		    },
			fail: function (res) {
				_this.panduan = true
				console.log('失败',res)
			}
		});
	},
	methods: {
		gender(e){
			var _this = this
			_this.sexCur = e.currentTarget.dataset.id
		}
	}
};
</script>

<style scoped lang="scss">
	.cont{
		padding: 0 84rpx;
		color: #A4A9B0;
		font-size: 24rpx;
		letter-spacing: 0.67rpx;
		line-height: 52rpx;
		margin-top: 0rpx;
	}
	.cont .title{
		font-size: 32rpx;
		color: #333;
		letter-spacing: 1.52rpx;
		line-height: 45rpx;
		margin-bottom: 60rpx;
		margin-top: 55rpx;
		text-align: center;
	}
	.cont .name{
		font-size: 50rpx;
		color: #333;
		line-height: 70rpx;
		letter-spacing: 2.38rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
	}
	.cont .sexuality{
		font-size: 26rpx;
		letter-spacing: 1.24rpx;
		color: #333;
		width: 480rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.cont .sexuality image{
		width: 123rpx;
		margin-left: 27rpx;
	}
	.cont > navigator{
		color: #65B4FF;
		font-size: 32rpx;
		letter-spacing: 1.52rpx;
		line-height: 45rpx;
		
	}
	.cont input{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #333;
		letter-spacing: 1.71;
		border-bottom: 1rpx solid #E7E7E7;
		margin-bottom: 10rpx;
	}
	.cont .btn{
		width:582rpx;
		height:84rpx;
		line-height: 84rpx;
		text-align: center;
		background-color: $uni-color1;
		box-shadow:0px 14rpx 40rpx 0rpx $uni-color1;
		border-radius: 45rpx;
		color: #fff;
		font-size: 32rpx;
		/* margin-top: 30rpx; */
	}
	.cont .password{
		position: relative;
	}
	.cont .password view{
		position: absolute;
		right: 0;
		top: 24rpx;
		color: $uni-color1;
	}
	.cont .nav{
		color: #888;
		font-size: 28rpx;
		margin-top: 40rpx;
	}
	.cont .tips{
		height: 100rpx;
		line-height:70rpx;
	}
	.mor{
		position: relative;
		padding: 64rpx;
		margin: 0 auto;
	}
	.mor .line{
		width: 100%;
		height: 1rpx;
		background-color: #e6e6e6;
	}
	.mor .ot{
		width: 180rpx;
		text-align: center;
		position: absolute;
		font-size: 24rpx;
		color: #888;
		letter-spacing: 1.14rpx;
		left: 50%;
		top: 48rpx;
		margin-left: -90rpx;
		background: #fff;
		margin-bottom: 52rpx;
	}
	.mor-link{
		color: #888;
		font-size: 22rpx;
		letter-spacing: 0.85rpx;
		width: 300rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.mor-link image{
		width: 48rpx;
		margin-left: 22rpx;
		margin-bottom: 18rpx;
	}
</style>
